<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Welcome</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="icon" href="https://jscdn.com.cn/highcharts/images/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="../static/JS/highcharts.js"></script>
    <script src="../static/JS/exporting.js"></script>
</head>
<style type="text/css">
    h4{
        padding-left: 350px;
        padding-top: 80px;
    }
        .navbar-nav.navbar-right{
        margin-right: 0px;
    }
    @media (min-width: 768px){
        .navbar-right{
        float: right !important;
        }
    }
    @media only screen and (min-width: 767px){
        .navbar-nav>li>a {
            padding: 8px 15px;
            margin-top: 16px;
            display: block;
            position: relative;
        }
    }
    #container{
        width: 500px;
        height: 400px;
        margin-top: 80px;
        font-family: "Microsoft YaHei", "宋体", "Segoe UI", "Lucida Grande", Helvetica, Arial, sans-serif, FreeSans, Arimo;
    }
    @media only screen and (min-width: 320px){
        #row2{
            position: relative;
        }
    }

</style>
<body>
<nav  class="navbar navbar-fixed-top navbar-has-shadow">
    <div  class="container">
        <div id="navbar-collapse" class="navbar-collapse collapse" aria-expanded="false">
           <ul class="nav navbar-nav navbar-right">
               <li><a id="user-idle" href="#" class="glyphicon glyphicon-user">&nbsp{{user}}</a></li>
               <li><a id="user-idle" href="#" class="glyphicon glyphicon-open">上传测试用例</a></li>
               <li><a id="logout-btn" href="/login/" target="_top">退出</a></li>
           </ul>
        </div>
    </div>
</nav>
<div class="col-sm-offset-2">
    <h4 href="#">欢迎您，来到 AutoZoneV1.0</h4>
</div>
<div class="container-fluid">
    <div class="row" id="row2">
        <div id="container"  class="col-md-4 col-md-offset-2"></div>
        <div id="squre"  class="col-md-4 col-md-offset-1"></div>
    </div>
</div>
<script>
var chart = Highcharts.chart('container',{

chart: {
    type: 'column'
},
title: {
    text: '当月测试用例执行结果',
},
xAxis: {
    categories: [
        '一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'
    ],
    crosshair: true
},
yAxis: {
    min: 0,
    title: {
        text: '数量'
    }
},
tooltip: {
    // head + 每个 point + footer 拼接成完整的 table
    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
    '<td style="padding:0"><b>{point.y:1f}</b></td></tr>',
    shared: true,
    useHTML: true
},
plotOptions: {
    column: {
        borderWidth: 0
    }
},
series: [{
    name: '成功',
    color:'#02F78E',
    data: [401, 419, 400, 410, 415, 412, 420, 411, 412, 417]
}, {
    name: '失败',
    color:'#FF9224',
    data: [19, 1, 20, 10, 5, 8, 0, 9, 8, 3]
}]
});
    var mW = 400;
    var mH = 400;
    var mData = [['UI自动化', 77],['接口自动化', 72],['单元测试', 46],['手动测试', 50]];
    var mCount = mData.length; //边数
    var mCenter = mW /2; //中心点
    var mRadius = mCenter - 100; //半径(减去的值用于给绘制的文本留空间)
    var mAngle = Math.PI * 2 / mCount; //角度
    var mCtx = null;
    var mColorPolygon = '#E0E0E0'; //多边形颜色
    var mColorLines = '#E0E0E0'; //顶点连线颜色
    var mColorText = '#3C3C3C';

    //初始化
    (function(){
        var squre = document.getElementById("squre");
    var canvas = document.createElement('canvas');
    squre.appendChild(canvas);
    canvas.height = mH;
    canvas.width = mW;
    mCtx = canvas.getContext('2d');

    drawPolygon(mCtx);
    drawLines(mCtx);
    drawText(mCtx);
    drawRegion(mCtx);
    drawCircle(mCtx);
    })();

    // 绘制多边形边
    function drawPolygon(ctx){
    ctx.save(); // save the default state

    ctx.strokeStyle = mColorPolygon;
    var r = mRadius/ mCount; //单位半径
    //画6个圈
    for(var i = 0; i < mCount; i ++){
      ctx.beginPath(); //开始路径
      var currR = r * ( i + 1); //当前半径
      //画6条边
      for(var j = 0; j < mCount; j ++) {
        var x = mCenter + currR * Math.cos(mAngle * j);
        var y = mCenter + currR * Math.sin(mAngle * j);

        console.log('x:' + x, 'y:' + y);
        ctx.lineTo(x, y);
      }
      ctx.closePath();  //闭合路径
      ctx.shadowColor='rgba(192,192,192, 0.8)';
      ctx.stroke();
    }

    ctx.restore(); // restore to the default state
    }

    //顶点连线
    function drawLines(ctx){
    ctx.save();

    ctx.beginPath();
    ctx.strokeStyle = mColorLines;

    for(var i = 0; i < mCount; i ++){
      var x = mCenter + mRadius * Math.cos(mAngle * i);
      var y = mCenter + mRadius * Math.sin(mAngle * i);

      ctx.moveTo(mCenter, mCenter);
      ctx.lineTo(x, y);
    }

    ctx.stroke();

    ctx.restore();
    }

    //绘制文本
    function drawText(ctx){
    ctx.save();

    var fontSize = mCenter / 12;
    ctx.font = fontSize + 'px Microsoft Yahei';
    ctx.fillStyle = mColorText;

    for(var i = 0; i < mCount; i ++){
      var x = mCenter + mRadius * Math.cos(mAngle * i);
      var y = mCenter + mRadius * Math.sin(mAngle * i);

      if( mAngle * i >= 0 && mAngle * i <= Math.PI / 2 ){
        ctx.fillText(mData[i][0], x, y + fontSize);
      }else if(mAngle * i > Math.PI / 2 && mAngle * i <= Math.PI){
        ctx.fillText(mData[i][0], x - ctx.measureText(mData[i][0]).width, y + fontSize);
      }else if(mAngle * i > Math.PI && mAngle * i <= Math.PI * 3 / 2){
        ctx.fillText(mData[i][0], x - ctx.measureText(mData[i][0]).width, y);
      }else{
        ctx.fillText(mData[i][0], x, y);
      }

    }

    ctx.restore();
    }

    //绘制数据区域
    function drawRegion(ctx){
    ctx.save();

    ctx.beginPath();
    for(var i = 0; i < mCount; i ++){
      var x = mCenter + mRadius * Math.cos(mAngle * i) * mData[i][1] / 100;
      var y = mCenter + mRadius * Math.sin(mAngle * i) * mData[i][1] / 100;

      ctx.lineTo(x, y);
    }
    ctx.closePath();
    ctx.fillStyle = 'rgba(135,206,235, 0.8)';
    ctx.shadowColor='rgba(192,192,192,0.8)';
    ctx.fill();

    ctx.restore();
    }
    //画点
    function drawCircle(ctx){
    ctx.save();

    var r = mCenter / 18;
    for(var i = 0; i < mCount; i ++){
      var x = mCenter + mRadius * Math.cos(mAngle * i) * mData[i][1] / 100;
      var y = mCenter + mRadius * Math.sin(mAngle * i) * mData[i][1] / 100;

      ctx.beginPath();
      ctx.arc(x, y, r/4, 0, Math.PI * 2);
      ctx.fillStyle = 'rgba(70,130,180,0.8)';
      ctx.fill();
    }

    ctx.restore();
    }
</script>
</body>
</html>